<template>
  <div class="subject-wrapper">
    <SearchNoData></SearchNoData>
    <div class="subject-container" >
    <SubjectTabs :tabs="tabs" :selectedTab="'all'"></SubjectTabs>
    <SubjectItem :search-results="searchResults" :selected-subject-type="selectedSubjectType"></SubjectItem> 
    <Pagination></Pagination>
    <LoginMask></LoginMask>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SubjectTabs from '~/components/subjectTabs.vue';
import SubjectItem from '~/components/subjectItem.vue';
const tabs = [
    { label: '全部', name: 'all' },
    { label: 'GMAT', name: 'gmat' },
    { label: 'GRE', name: 'gre' },
    { label: 'EA', name: 'EA' }
];

const selectedTab = ref(1);
const searchResults = ref([
  { id: 1, title: "Result 1 Title", time: "2025-01-01 13:00" },
  { id: 2, title: "Result 2 Title", time: "2025-01-02 14:00" },
  // Add more results here...
]);
const selectedSubjectType = ref('all');
</script>

<style scoped lang="scss">
.subject-wrapper {
//   displa;
  width:100%;
  height: 100%;
  background-color: #ecf4f2;
  padding-bottom:30px;
 
  .subject-container{
    padding: 20px;
  width:1000px;
  margin:0px auto;
  display: flex;
  flex-direction: column;
//   align-items: center;
  background-color: #FFFFFF;
  border-radius: 20px;
  }

}
</style>
